<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <title>企业合同管理系统</title>
    <link th:href="@{/library/css/index.css}" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-beta.2/echarts.js"></script>

    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="https://cdn.rawgit.com/mdehoog/Semantic-UI-Calendar/76959c6f7d33a527b49be76789e984a0a407350b/dist/calendar.min.css"
          rel="stylesheet" type="text/css"/>
    <script src="https://cdn.rawgit.com/mdehoog/Semantic-UI-Calendar/76959c6f7d33a527b49be76789e984a0a407350b/dist/calendar.min.js"></script>
</head>
<script>
    //全局路径静态参数
    // window.Constant = {
    //     //remote IP: 139.224.30.102
    //     ConstantPath: "http://139.224.30.102:8080/constant",
    //     DownLoadPath: "http://www.sisucc.com:8888/",
    //     PagesPath: "http://139.224.30.102:8080/pages",
    //     ApiPath: "http://139.224.30.102:8080/"
    // }

    //全局路径静态参数
    window.Constant = {
        //remote IP: 139.224.30.102
        ConstantPath: "http://localhost:8080/constant",
        DownLoadPath: "http://www.sisucc.com:8888/",
        PagesPath: "http://localhost:8080/pages",
        ApiPath: "http://localhost:8080/"
    }

    //设置页面全局静态参数
    const constant = {
        csrfToken: $("meta[name='_csrf']").attr("content"),
        csrfHeader: $("meta[name='_csrf_header']").attr("content"),
        pageSize: 10
    }
    //全局参数对象声明
    window.param = {}

    //echarts' param
    let departChart,depart,departParam,optionDepart;
    let typeChart,type,typeParam,optionType;
</script>
<body>

<div class="index-head">
    <div class="ui secondary menu" id="index-head-menu">
        <a class="item h2" id="icon-to-index">
            <i class="skyatlas icon"></i>企业合同管理系统
        </a>
        <div class="right menu">
            <div class="item">
<!--                <div class="ui small icon input">-->
<!--                    <input type="text" placeholder="根据内容检索">-->
<!--                    <i class="search link icon"></i>-->
<!--                </div>-->
            </div>
            <a class="item">
                <span class="ui small inverted teal button" id="logout"> 登 出 </span>
                <div class="ui tiny modal" id="logout-modal">
                    <div class="ui mini header title">提示信息</div>
                    <div class="content">
                        确认要退出当前账户吗？
                    </div>
                    <div class="actions">
                        <button class="ui small negative button"> 取 消</button>
                        <button class="ui small positive button"> 确 定</button>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

<div class="index-body">
    <div class="index-body-menu">
        <div class="ui styled accordion segment" id="menu-accordion">
            <div class="title">
                <i class="home small icon"></i>
                我的首页
                <i class="class dropdown icon"></i>
            </div>
            <div class="content index-menu-height-one">
                <div class="ui secondary vertical menu">
                    <a class="item" id="contractHome" menu-name="我的首页" path="/contractHome/myTask.html">我的任务</a>
                </div>
            </div>

            <div class="active title">
                <i class="envelope small icon"></i>
                合同管理
                <i class="class dropdown icon"></i>
            </div>
            <div class="active content index-menu-height-two">
                <div class="ui secondary vertical menu">
                    <a class="item active" id="contractManage" menu-name="管理合同"
                       path="/contractManage/contractQuery.html">管理合同</a>
                    <a class="item" id="contentSearch" menu-name="内容检索"
                       path="/contractManage/contentSearch.html">内容检索</a>
                </div>
            </div>

            <div class="title">
                <i class="image outline small icon"></i>
                统计报表
                <i class="class dropdown icon"></i>
            </div>
            <div class="content index-menu-height-three">
                <div class="ui secondary vertical menu">
                    <a class="item" id="statisticByMonth" menu-name="按月份统计报"
                       path="/statisticReport/statisticByMonth.html">按月份统计</a>
                    <a class="item" id="statisticByDepart" menu-name="按部门统计报"
                       path="/statisticReport/statisticByDepart.html">按部门统计</a>
                    <a class="item" id="statisticByType" menu-name="按分类统计报"
                       path="/statisticReport/statisticByType.html">按类型统计</a>
                </div>
            </div>

            <div class="title">
                <i class="user small icon"></i>
                信息设置
                <i class="class dropdown icon"></i>
            </div>
            <div class="content index-menu-height-one">
                <div class="ui secondary vertical menu">
                    <a class="item" id="userInformation" menu-name="用户信息"
                       path="/informationSetting/userInformation.html">用户信息</a>
                </div>
            </div>

            <div class="title">
                <i class="list small icon"></i>
                系统设置
                <i class="class dropdown icon"></i>
            </div>
            <div class="content index-menu-height-tree">
                <div class="ui secondary vertical menu">
                    <a class="item" id="staffSetting" menu-name="职员管理" path="/systemSetting/staffSetting.html">职员管理</a>
                    <a class="item" id="departSetting" menu-name="部门管理"
                       path="/systemSetting/departSetting.html">部门管理</a>
                    <a class="item" id="typeSetting" menu-name="类型管理" path="/systemSetting/typeSetting.html">类型管理</a>
                </div>
            </div>
        </div>
    </div>
    <div class="index-body-content">
        <div class="ui top attached tabular menu" id="main-topic">
            <div class="ui tiny header item"></div>
        </div>
        <div class="ui attached segment" id="main-content">
            <div>
                <!--加载内容区域！-->
            </div>
        </div>
        <!--预备全局提示框-->
        <div class="ui blue message"
             id="successMessage"
             style="position: fixed; left: calc(100% / 2 - 6em); top: calc(100% / 2); z-index: 2147483647; display: none">
            <i class="checkmark icon"></i>
            <span id="successMsg">数据加载成功！</span>
        </div>
        <div class="ui red message"
             id="ErrorMessage"
             style="position: fixed; left: calc(100% / 2 - 6em); top: calc(100% / 2); z-index: 2147483647; display: none">
            <i class="remove icon"></i>
            <span id="errorMsg">数据加载失败！</span>
        </div>
        <div class="ui green message"
             id="WaiteMessage"
             style="position: fixed; left: calc(100% / 2 - 6em); top: calc(100% / 2); z-index: 2147483647; display: none">
            <i class="spinner loading icon"></i>
            <span id="waiteMsg">数据加载中...</span>
        </div>
        <div class="ui tiny modal" id="delete-list-modal">
            <div class="ui mini header title">提示信息</div>
            <div class="content">
                该信息删除后将无法恢复，确定要删除吗？
            </div>
            <div class="actions">
                <button class="ui small negative button"> 取 消</button>
                <button class="ui small positive button"> 确 定</button>
            </div>
        </div>
    </div>
</div>

<!--职员新增/修改模态框-->
<div class="ui modal" id="user-mail-setting-modal">
    <div class="ui mini header title" id="user-mail-setting-modal-header"></div>
    <div class="scrolling content" style="height: 150px;">
        <div class="ui grid">
            <div class="row row-height-condition">
                <div class="five wide column">
                    <div class="ui small input">
                        <span class="all-condition-title">新的邮箱：</span>
                        <input type="text" id="emailValue">
                    </div>
                </div>
                <div class="five wide column">
                    <div class="ui small input">
                        <span class="all-condition-title">验证码：</span>
                        <input type="text" id="verifyCodeValue">
                    </div>
                </div>
                <div class="four wide column">
                    <button class="ui twitter small button all-button-between-margin" id="user-setting-email-code">
                        验 证 码
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="actions">
        <button class="ui small negative button"> 取 消</button>
        <button class="ui small positive button"> 确 定</button>
    </div>
</div>

</body>
<script>
    $(() => {
        pageInit();
        eventInit();
        leftMenuInit();
        isExistAboutUserEmail();
    });

    let isExistAboutUserEmail = () => {
        let emailStatus = queryUserEmailStatus();
        if ("ERROR" == emailStatus) {
            saveNewEmailModal();
        }
    }

    let saveNewEmailModal = () => {
        $("#user-mail-setting-modal-header").text("设置邮箱");
        $("#user-mail-setting-modal").modal({
            onApprove: function () {
                let emailValue = $("#emailValue").val().trim();
                if ("" === emailValue) {
                    showErrorPromptBox("请输入新的邮箱！", 2);
                    return false;
                }
                let reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
                if (!reg.test(emailValue)) {
                    showErrorPromptBox("请输入格式正确的邮箱！", 2);
                    return false;
                }
                let verifyCodeValue = $("#verifyCodeValue").val().trim();
                if ("" === verifyCodeValue) {
                    showErrorPromptBox("请输入验证码！", 2);
                    return false;
                }
                let status = verifyConfirmCodeForBindingEmail(verifyCodeValue);
                if ("ERROR" === status) {
                    showErrorPromptBox("验证码错误，请重新输入", 2);
                    $("#confirmCode").val("");
                    getCode();
                    return false;
                }

                let queryParams = {
                    newEmail: emailValue
                }

                $.ajax({
                    url: "updateUserEmail",
                    type: 'post',
                    data: queryParams,
                    // async: false,
                    beforeSend: (request) => {
                        if (constant.csrfToken && constant.csrfHeader) {
                            request.setRequestHeader(constant.csrfHeader, constant.csrfToken);
                        }
                    },
                    success: (data) => {
                        if (data == "SUCCESS") {
                            showSuccessPromptBox("邮箱绑定成功！", 2);
                            $("#currentEmail").val(newEmail);
                        } else {
                            showErrorPromptBox("邮箱绑定失败！", 2);
                        }
                    },
                    error: () => {
                        showErrorPromptBox("系统繁忙，请稍后访问！", 2);
                    }
                });
                $("#newEmail").val("");
                $("#verifyCode").val("");

                $("#staff-setting-modal").modal("hide");
            },
            onDeny: function () {

            }
        }).modal('show');
        $("#emailValue").val("");
        $("#verifyCodeValue").val("");
    }

    let verifyConfirmCodeForBindingEmail = (code) => {
        let verifyStatus = "ERROR";
        let queryParam = {
            code: code
        }
        $.ajax({
            url: "validate/verifyCode",
            type: 'get',
            data: queryParam,
            async: false,
            beforeSend: (request) => {
                if (constant.csrfToken && constant.csrfHeader) {
                    request.setRequestHeader(constant.csrfHeader, constant.csrfToken);
                }
            },
            success: (data) => {
                verifyStatus = data;
            },
            error: () => {
                showErrorPromptBox("系统繁忙，请稍后访问！", 2);
            }
        });
        return verifyStatus;
    }

    $("#user-setting-email-code").click(() => {
        let emailValue = $("#emailValue").val().trim();
        if ("" === emailValue) {
            showErrorPromptBox("请输入新的邮箱！", 2);
            return false;
        }
        let reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
        if (!reg.test(emailValue)) {
            showErrorPromptBox("请输入格式正确的邮箱！", 2);
            return false;
        }

        let queryParams = {
            newEmail: emailValue
        }

        $.ajax({
            url: "validate/getEmailCode",
            type: 'post',
            data: queryParams,
            // async: false,
            beforeSend: (request) => {
                if (constant.csrfToken && constant.csrfHeader) {
                    request.setRequestHeader(constant.csrfHeader, constant.csrfToken);
                }
            },
            success: (data) => {
                if (data == "SUCCESS") {
                    showSuccessPromptBox("验证码发送成功！", 2);
                } else if (data == "ERROR") {
                    showErrorPromptBox("验证码发送失败！", 2);
                }
            },
            error: () => {
                showErrorPromptBox("系统繁忙，请稍后访问！", 2);
            }
        });
    })

    let queryUserEmailStatus = () => {
        let emailStatus = "ERROR";
        $.ajax({
            url: "getCurrentUserEmail",
            type: 'post',
            // data: "",
            async: false,
            beforeSend: (request) => {
                if (constant.csrfToken && constant.csrfHeader) {
                    request.setRequestHeader(constant.csrfHeader, constant.csrfToken);
                }
            },
            success: (data) => {
                if ("" !== data) {
                    emailStatus = data;
                    console.log("current user email: " + data);
                }
            },
            error: () => {
                console.log("获取当前用户邮箱状态失败！");
            }
        });
        return emailStatus;
    }

    //页面初始化内容
    let pageInit = () => {
        //页面默认选择的右侧菜单ID
        window.selectedMenu = "contractManage";
        $("#" + window.selectedMenu).css("color", "teal");
        $("#main-topic div")[0].innerText = "合同管理";
        $("#main-content").load(window.Constant.PagesPath + "/contractManage/contractQuery.html")
    }

    let eventInit = () => {
        $("#icon-to-index").click(() => {
            window.location.reload();
        })

        $("#menu-accordion").accordion({on: 'click'});

        $("#logout").click(() => {
            //change modal's topic and content
            // $("#logout-modal div")[0].innerText = "AAA";
            // $("#logout-modal div")[1].innerText = "BBBBBBBBBB!";
            $("#logout-modal").modal({
                onApprove: function () {
                    $.ajax({
                        url: "logout",
                        type: 'post',
                        // data: "",
                        async: false,
                        beforeSend: (request) => {
                            if (constant.csrfToken && constant.csrfHeader) {
                                request.setRequestHeader(constant.csrfHeader, constant.csrfToken);
                            }
                        },
                        success: (data) => {
                            if ('0' === data.statusCode) {
                                closeWaitPromptBox();
                            } else if ('-1' === data.statusCode) {
                                closeWaitPromptBox();
                                showErrorPromptBox("", 2);
                            }
                        },
                        error: () => {
                            closeWaitPromptBox();
                            showErrorPromptBox("系统繁忙, 请稍后访问", 2);
                        }
                    });
                    window.location.reload();
                    $("#delete-list-modal").modal("hide");
                },
                onDeny: function () {

                }
            }).modal('show');
        })
    }

    let leftMenuInit = () => {
        $("#menu-accordion div.content div a").click((e) => {
            let preMenu = window.selectedMenu;
            let menuId = e.currentTarget.getAttribute("id");
            let menuName = e.currentTarget.getAttribute("menu-name");
            let visitPath = e.currentTarget.getAttribute("path");
            if ("" !== preMenu) {
                $("#" + preMenu).removeClass("active");
            }
            $("#" + menuId).addClass("active");
            $("#" + menuId).css("color", "teal");
            $("#main-topic div")[0].innerText = menuName;
            if (preMenu !== menuId) {
                $("#main-content div").remove();
                $("#" + preMenu).css("color", "black");
                $("#main-content").load(window.Constant.PagesPath + visitPath);
            }
            window.selectedMenu = menuId;
        })
    }

    //全局提示框内容
    //默认用法：showSuccessPromptBox("","");
    let showSuccessPromptBox = (message, duration) => {
        $("#successMessage").show();
        if ("" !== message.trim()) {
            $("#successMsg").text(message);
        }
        if ("" !== duration) {
            setTimeout(() => {
                closeSuccessPromptBox();
            }, duration * 1000);
        }
    }

    let showErrorPromptBox = (message, duration) => {
        $("#ErrorMessage").show();
        if ("" !== message.trim()) {
            $("#errorMsg").text(message);
        }
        if ("" !== duration) {
            setTimeout(() => {
                closeErrorPromptBox();
            }, duration * 1000);
        }
    }

    let showWaitPromptBox = (message, duration) => {
        $("#WaiteMessage").show();
        if ("" !== message.trim()) {
            $("#waiteMsg").text(message);
        }
        if ("" !== duration) {
            setTimeout(() => {
                closeWaitPromptBox();
            }, duration * 1000);
        }
    }

    let closeSuccessPromptBox = () => {
        $("#successMessage").hide();
        $("#successMsg").text("数据加载成功！");
    }

    let closeErrorPromptBox = () => {
        $("#ErrorMessage").hide();
        $("#errorMsg").text("数据加载失败！");
    }

    let closeWaitPromptBox = () => {
        $("#WaiteMessage").hide();
        $("#waiteMsg").text("数据加载中...");
    }

</script>
</html>